<template>
  <div class="itemlist">
     <template v-for="(item,index) in itemdata" :key="index">
         <div class="item">
           <div class="itembody">
             <div class="left">
               <img :src="item.defaultPicture" alt="" class="img">
               <span class="number">{{ item.commentBrief?.commentBrief }}</span>
             </div>
             <div class="right">
               <div class="head"><p>{{ item.unitName }}</p></div>
               <div class="star">
                 <van-rate :model-value="item.rankScore" color="#ffd21e" readonly allow-half />
               </div>
               <div class="infos">
               <!-- <div class="infoitem">{{ item.unitInfor }}</div> -->
              <div class="text">
                <template  v-for="(text,index) in item.unitSummeries" :key="index">
                  <span class="textitem">{{ text.text }}</span>
                </template>
              </div>
             </div>
               <div class="prices">
               <div class="oldprice price">原价:￥{{ item.productPrice }}</div>
               <div class="newprice price">优惠价:￥{{ item.finalPrice }}</div>
             </div>
             <div class="cut">
                <template  v-for="(text,index) in item.unitTags.slice(0,3)" :key="index">
              <span class="cutting">
                {{ text.tagName }}
              </span>
                </template>
             </div>
             </div>
           </div>  
         </div>
     </template>
  </div>
 </template>
 
 
 <script setup>
 const props=defineProps({
     itemdata:{
         type:Array,
         default:[]
     }
 })
 
 
 </script>
 
 
 <style lang="less" scoped>
 .itemlist{
   width: 100%;
   height: 667px;
   overflow-y: auto; //出现垂直滚动条
   padding-bottom: 50px; 
   .itembody{
     display: flex;
     flex-wrap: nowrap;
     margin-top: 10px;
     // background-color: #ccc;
     padding-left: 5px;
     .left{
       position: relative;
       padding-bottom: 10px;
       .img{
         width: 120px;
         height: 120px;
         border-radius: 10px;
       }
       .number{
         width: 50px;
         height: 25px;
         position: absolute;
         left: 0;
         right: 100px;
         top: 0;
         color: #ff9854;
         background-color: rgba(255,244,216);
         border-bottom-right-radius: 10px;
       }
     }
     .right{
       flex:1;
       padding-left: 20px;
       // display: flex;
       flex-wrap: wrap;
       .head{

         &>p{
           width: 200px;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           font-weight: 700;
         }
       }
       .star{
        position: relative;
        bottom: 8px;
       }
       .infos{
         display: flex;
         justify-content: space-between;
         font-size: 12px;
         color: #666;
         .textitem{
           margin-right: 6px;
           border-radius: 2px;
           background-color: #ff9854;
         }
       }
       .prices{
         margin-top: 10px;
         display: flex;
         justify-content: space-evenly;
         .price{
           margin-right: 20px;
         }  
         .oldprice{
           color: #999;
         }
         .newprice{
           color: red;
           font-size: 18px;
         }
       }
       .cut{
        .cutting{
          margin-right: 8px;
          border-radius: 2px;
          background-color: #ff9854;
          color: #f5f5f5;
          font-size: 12px;
        }
       }
 
     }
   }
 }
 
 </style>